<template>
  <div style=" padding-left:146px ;" class="container-box">
    <div class="container-nav-box">
      <el-menu v-if="activeTop=='1'" :default-active="activeIndex" class="el-menu-demo" mode="vertical" @select="handleSelect" background-color="#313444" text-color="#9C9EAF" active-text-color="#00B2A9">
        <el-menu-item :class="{'thisNav':thisNav=='ticketList'}" index="ticketList">门票</el-menu-item>
        <el-menu-item :class="{'thisNav':thisNav=='forumManagement'}" index="forumManagement">论坛管理</el-menu-item>
        <!-- <el-menu-item :class="{'thisNav':thisNav=='priceGroup'}" index="priceGroup">价格组</el-menu-item> -->
        <el-menu-item :class="{'thisNav':thisNav=='fieldManagement'}" index="fieldManagement">字段管理</el-menu-item>
        <el-submenu index="222222">
          <template slot="title">协议管理</template>
          <el-menu-item :class="{'thisNav':thisNav=='userProtocol'}" index="userProtocol">用户协议</el-menu-item>
          <el-menu-item :class="{'thisNav':thisNav=='loginProtocol'}" index="loginProtocol">登陆协议</el-menu-item>
          <el-menu-item :class="{'thisNav':thisNav=='faceProtocol'}" index="faceProtocol">录脸协议</el-menu-item>
        </el-submenu>
        <el-menu-item :class="{'thisNav':thisNav=='shareList'}" index="shareList">分享列表</el-menu-item>
      </el-menu>
      <el-menu v-if="activeTop=='2'" :default-active="activeIndex" class="el-menu-demo" mode="vertical" @select="handleSelect" background-color="#313444" text-color="#9C9EAF" active-text-color="#00B2A9">
        <el-menu-item v-if="isManager=='1'" :class="{'thisNav':thisNav=='powerManage'}" index="powerManage">权限管理</el-menu-item>
        <el-menu-item v-if="isManager=='2'" :class="{'thisNav':thisNav=='powerManage'}" index="powerManage">子权限管理</el-menu-item>
        <!-- <el-menu-item :class="{'thisNav':thisNav=='otherInstall'}" index="otherInstall">其他设置</el-menu-item> -->
      </el-menu>
      <!-- <el-menu v-if="activeTop=='3'" :default-active="activeIndex" class="el-menu-demo" mode="vertical" 
      @select="handleSelect" background-color="#fff" text-color="#41465C" active-text-color="#383E54">
        <el-menu-item :class="{'thisNav':thisNav=='orderDetail'}" index="orderDetail">订单信息</el-menu-item>
      </el-menu>-->
    </div>
    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["activeTop", "leftNav"])
  },
  watch: {
    leftNav: {
      handler: function(val, oldVal) {
        this.thisNav = val;
      }
    }
  },
  data() {
    return {
      isManager: sessionStorage.getItem("myPower"),
      activeIndex: "1",
      thisNav: "ticketList"
    };
  },
  mounted() {},
  methods: {
    initLeft() {
      this.$store.dispatch(
        "setLeftNav",
        sessionStorage.getItem("activeL") || "ticketList"
      );
      this.$router.push({
        name: sessionStorage.getItem("activeL")
      });
      this.$store.dispatch(
        "setActiveTop",
        sessionStorage.session_activeTop
          ? sessionStorage.getItem("session_activeTop")
          : "1"
      );
    },
    handleSelect(key, keyPath) {
      this.$store.dispatch("setLeftNav", key);
      sessionStorage.setItem("activeL", key);
      this.$router.push({
        name: key
      });
      this.thisNav = key;
    }
  },
  created() {
    this.initLeft();
  }
};
</script>


<style scoped>
/deep/.el-menu {
  border: none !important;
}
.container-box {
  width: 100%;
  height: auto;
  padding: 10px;
  position: relative;
  background: #f9f9fe;
}
.container-nav-box {
  /* position: absolute;
  left: 0px;
  top: 0px; */
  position: fixed;
  left: 0px;
  top: 0px;
  padding-top: 79px;
  width: 130px;
  height: 100%;
  overflow: hidden;
  background: #313444;
}
.container-nav {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #000;
  display: inline-block;
  cursor: pointer;
}
.thisNav {
  background-color: #272a36 !important;
  color: #00b2a9 !important;
}
.container-nav:hover {
  background-color: #00b2a9;
  color: #fff;
}
.container {
  width: 100%;
  height: auto;
  min-height: 460px;
  padding-right: 0px;
  background: #ffffff;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.07);
  border-radius: 8px;
}
</style>



